<template>
  <div class="register">
    <!--盒子-->
    <div class="box">
      <!--头-->
      <div class="header">
        我要学Java | 注册
      </div>
      <!--信息box-->
      <div class="info-box">
        <div class="left">
          <div class="text">手机号:</div>
          <div class="text">设置密码:</div>
          <div class="text">确认密码:</div>
          <div class="text">验证码:</div>
        </div>
        <div class="right">
          <div class="iphoneNo">
            <Tooltip
              placement="right"
              theme="light">
              <div slot="content">
                <p style="font-size: 14px">仅限中国大陆手机号</p>
              </div>
              <Input
                type="text"
                v-model="iphoneNo"
                placeholder="请输入手机号"
                size="large"
                style="width: 300px"
                clearable
                prefix="ios-phone-portrait"/>
            </Tooltip>
          </div>
          <div class="pwd">
            <Tooltip
              placement="right"
              theme="light">
              <div slot="content">
                <p style="font-size: 14px">6~14个字符，区分大小写</p>
                <p style="font-size: 14px">字母，数字，标点符号(除空格)</p>
              </div>
              <Input
                type="password"
                v-model="password"
                placeholder="请输入密码"
                size="large"
                style="width: 300px"
                clearable
                password
                prefix="ios-finger-print"/>
            </Tooltip>
          </div>
          <div class="chkPwd">
            <Tooltip
              placement="right"
              theme="light">
              <div slot="content">
                <p style="font-size: 14px">6~14个字符，区分大小写</p>
                <p style="font-size: 14px">字母，数字，标点符号(除空格)</p>
              </div>
              <Input
                type="password"
                v-model="chkPwd"
                placeholder="请确认密码"
                size="large"
                style="width: 300px"
                clearable
                password
                prefix="ios-finger-print"/>
            </Tooltip>
          </div>
          <div class="vCode">
            <Input
              type="text"
              v-model="verifyCode"
              placeholder="验证码"
              size="large"
              style="width: 180px"
              clearable
              prefix="ios-lock-outline"
              @on-enter="enter"/>
            <!--获取验证码-->
            <div v-if="verifyCodeButtonFlag" class="v-code-btn">
              <Button
                html-type="button"
                style="background-color: #19be6b;
                          color: #FFFFFF;
                          width: 110px;
                          height: 40px"
                @click="getSmsCode">
                获取验证码
              </Button>
            </div>
            <!--重新获取验证码-->
            <div v-else="!verifyCodeButtonFlag" class="v-code-btn">
              <Button
                html-type="button"
                style="border:1px solid #DDDDDD;
                          background-color: #FFFFFF;
                          color: #B1B1B1;
                          font-size: 16px;
                          width: 110px;
                          height: 40px;">
                {{countDown}}秒后重发
              </Button>
            </div>
          </div>
        </div>
      </div>
      <!--注册-->
      <div class="reg-btn-box">
        <Button
          type="success"
          size="large"
          html-type="button"
          style="width: 100%;"
          @click="register">
          注册
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
  import {checkIphoneNo, checkStrIsNull} from "../../tools/checkAccount";

  export default {
    name: "",
    components: {},
    data() {
      return {
        //手机号
        iphoneNo: "",
        //密码
        password: "",
        //密码重复
        chkPwd: "",
        //验证码
        verifyCode: "",
        //获取验证码flag
        verifyCodeButtonFlag: true,
        //定时器
        c: null,
        //倒计时
        countDown: 30
      }
    },
    methods: {
      //获取验证码
      getSmsCode: function () {
        let b1 = this.checkIphoneNoIsNull();
        if (!b1) {
          return false
        }
        this.verifyCodeButtonFlag = false
        this.c = setInterval(() => {
          this.countDown--;
          //当计数为0时，回复初始状态
          if (this.countDown == 0) {
            this.countDown = 30;
            this.verifyCodeButtonFlag = true;
            clearInterval(this.c);
          }
        }, 1000)


        this.axios.get(`/login/register/verifyCode/${this.iphoneNo}`)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "短信发送成功"
              })
            } else {
              if (resp.data.code == 20001) {
                this.$Notice.error({
                  title: "该手机号已经注册"
                })
                this.$router.push("/login");
              }
            }
          })
      },
      enter: function () {
        this.register()
      },
      /*校验手机号是否为空 且格式正确*/
      checkIphoneNoIsNull: function () {
        let b = checkStrIsNull(this.iphoneNo);
        if (b) {
          this.$Notice.warning({
            title: "手机号不能为空"
          })
          return false
        } else {
          let b1 = checkIphoneNo(this.iphoneNo)
          if (!b1) {
            this.$Notice.warning({
              title: "手机号格式错误"
            })
            this.iphoneNo = ""
            return false
          }
        }
        return true
      },
      /*校验密码是否为空*/
      checkPwdIsNull: function () {
        let b = checkStrIsNull(this.password);
        if (b) {
          this.$Notice.warning({
            title: "密码不能为空"
          })
          return false
        } else {
          let length = this.password.trim().length;
          if (length < 6 || length > 14) {
            this.$Notice.warning({
              title: "请保持密码在 6~14 位"
            })
          }
        }
        return true
      },
      /*校验确认密码是否为空*/
      checkChkPwdIsNull: function () {
        let b = checkStrIsNull(this.chkPwd);
        if (b) {
          this.$Notice.warning({
            title: "请验证密码"
          })
          return false
        }
        return true
      },
      /*校验密码与确认密码是否相同*/
      checkPwdEqualsChkPwd: function () {
        if (this.password.trim() != this.chkPwd.trim()) {
          this.$Notice.warning({
            title: "请保持密码与确认密码一致"
          })
          this.chkPwd = ""
          return false
        }
        return true
      },
      //校验验证码不能为空
      checkVerifyCode: function () {
        let b = checkStrIsNull(this.verifyCode);
        if (b) {
          this.$Notice.warning({
            title: "验证码不能为空"
          })
          return false
        }
        return true
      },
      /*注册*/
      register: function () {
        //校验
        let b1 = this.checkIphoneNoIsNull();
        let b3 = this.checkPwdIsNull();
        let b4 = this.checkChkPwdIsNull();
        let b5 = this.checkPwdEqualsChkPwd();
        let b6 = this.checkVerifyCode();
        if (!b1 || !b3 || !b4 || !b5 || !b6) {
          return false;
        }
        //注册
        let data = {
          iphoneNo: this.iphoneNo,
          //密码明文 base64
          po: Base64.encode(this.password),
          //密码密文 md5
          pc: this.Md5(this.password)
        }
        this.axios.post(`/login/register/register/${this.iphoneNo}/${this.verifyCode}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              this.$Notice.success({
                title: "注册成功"
              })
              this.$router.push("/login");
            } else {
              if (resp.data.code == 30001) {
                this.$Notice.error({
                  title: "验证码错误"
                })
              }
            }
          })
      }
    },
    mounted() {
    },
    beforeDestroy() {
      //离开页面清理定时器
      clearInterval(this.c);
    }
  }
</script>

<style scoped>
  .register {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  /*注册盒子*/
  .register .box {
    width: 800px;
    height: 400px;
    margin: 50px auto;
    box-shadow: 1px 4px 8px 1px #333333;
  }

  /*头*/
  .register .box .header {
    width: 100%;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
    font-family: 新宋体;
    color: #F20A0A;
    text-align: center;
  }

  /*信息盒子*/
  .register .box .info-box {
    overflow: hidden;
  }

  /*文字盒子*/
  .register .box .info-box .left {
    float: left;
    margin-left: 200px;
  }

  /*文字*/
  .register .box .info-box .left div.text {
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    margin-top: 20px;
  }

  /*右侧输入框盒子*/
  .register .box .info-box .right {
    float: left;
    margin-left: 8px;
  }

  /*右侧输入框*/
  .register .box .info-box .right .iphoneNo {
    margin-top: 18px;
  }

  .register .box .info-box .right .pwd {
    margin-top: 10px;
  }

  .register .box .info-box .right .chkPwd {
    margin-top: 14px;
  }

  .register .box .info-box .right .vCode {
    margin-top: 14px;
  }

  .register .box .info-box .right .v-code-btn {
    float: right;
  }

  /*注册盒子*/
  .register .box .reg-btn-box {
    width: 376px;
    margin: 30px 0px 0px 200px;
  }
</style>
